<template>
  <div>
    <!-- 搜索区域 -->
    <div class="card" style="margin-bottom: 10px;">
      <el-input
        prefix-icon="Search"
        style="width: 300px; margin-right: 10px"
        placeholder="搜索套餐名称"
        v-model="searchKey"
      ></el-input>
      <el-button type="primary" @click="loadData">搜索</el-button>
      <el-button type="warning" @click="resetSearch">重置</el-button>
    </div>

    <!-- 操作区域 -->
    <div class="card" style="margin-bottom: 10px">
      <div style="margin-bottom: 10px">
        <el-button type="primary" @click="openDialog('add')">创建套餐</el-button>
      </div>

      <!-- 数据表格 -->
      <el-table :data="tableData" border stripe>
        <el-table-column type="selection" width="55" align="center"/>
        <el-table-column type="index" label="序号" width="70" align="center"/>

        <!-- 套餐封面 -->
        <el-table-column label="套餐封面" width="160" align="center">
          <template #default="{row}">
            <el-image
              class="setmeal-cover"
              :src="row.cover"
              :preview-src-list="[row.cover]"
              fit="cover"
              preview-teleported
            />
          </template>
        </el-table-column>

        <!-- 套餐名称 -->
        <el-table-column prop="name" label="套餐名称" width="180" align="center"/>

        <!-- 包含菜品 -->
        <el-table-column label="包含菜品" align="center">
          <template #default="{row}">
            <div class="dish-tags">
              <el-tag
                v-for="(item, index) in row.items"
                :key="index"
                type="info"
                size="small"
              >
                {{ item.name }} ×{{ item.quantity }}
              </el-tag>
            </div>
          </template>
        </el-table-column>

        <!-- 价格信息 -->
        <el-table-column label="价格信息" width="200" align="center">
          <template #default="{row}">
            <div class="price-display">
              <template v-if="row.discount">
                <div class="original-price">
                  ¥{{ calculateOriginalPrice(row).toFixed(2) }}
                </div>
                <div class="current-price">
                  ¥{{ calculateCurrentPrice(row).toFixed(2) }}
                </div>
              </template>
              <template v-else>
                <div class="normal-price">
                  ¥{{ row.price.toFixed(2) }}
                </div>
              </template>
            </div>
          </template>
        </el-table-column>

        <!-- 优惠信息 -->
        <el-table-column label="优惠信息" width="200" align="center">
          <template #default="{row}">
            <div v-if="row.discount" class="discount-info">
              <el-tag :type="row.discount.type === 0 ? 'success' : 'warning'">
                {{ formatDiscount(row.discount) }}
              </el-tag>
              <div v-if="row.discount.condition" class="discount-condition">
                {{ row.discount.condition }}
              </div>
            </div>
            <span v-else>-</span>
          </template>
        </el-table-column>

        <!-- 状态 -->
        <el-table-column label="状态" width="100" align="center">
          <template #default="{row}">
            <el-tag :type="row.status ? 'success' : 'danger'">
              {{ row.status ? '上架' : '下架' }}
            </el-tag>
          </template>
        </el-table-column>

        <!-- 操作 -->
        <el-table-column label="操作" width="200" fixed="right" align="center">
          <template #default="{row}">
            <el-button type="primary" size="small" @click="openDialog('edit', row)">编辑</el-button>
            <el-button
              type="danger"
              size="small"
              @click="toggleStatus(row)"
            >{{ row.status ? '下架' : '上架' }}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="card" v-if="pagination.total">
      <el-pagination
        background
        :page-sizes="[5, 10, 20]"
        layout="total, sizes, prev, pager, next"
        :total="pagination.total"
        v-model:current-page="pagination.current"
        v-model:page-size="pagination.pageSize"
      />
    </div>

    <!-- 表单对话框（保持原有结构） -->
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

// 模拟数据
const mockData = [
  {
    id: 1,
    name: '双人浪漫套餐',
    cover: 'https://source.unsplash.com/random/300x200?dinner',
    items: [
      { name: '菲力牛排', quantity: 2 },
      { name: '龙虾浓汤', quantity: 2 },
      { name: '提拉米苏', quantity: 1 }
    ],
    price: 598,
    discount: {
      type: 0,       // 0-百分比 1-固定金额
      value: 15,     // 15%折扣
      originalPrice: 698,
      condition: '周末特惠'
    },
    status: true
  },
  {
    id: 2,
    name: '家庭共享套餐',
    cover: 'https://source.unsplash.com/random/300x200?family',
    items: [
      { name: '战斧牛排', quantity: 1 },
      { name: '海鲜拼盘', quantity: 1 },
      { name: '蔬菜沙拉', quantity: 3 }
    ],
    price: 888,
    discount: {
      type: 1,       // 固定金额
      value: 100,    // 立减100元
      originalPrice: 988,
      condition: '节日特惠'
    },
    status: true
  }
]

// 响应式数据
const searchKey = ref('')
const tableData = ref([...mockData])
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: mockData.length
})

// 价格计算方法
const calculateOriginalPrice = (row) => {
  return row.discount?.originalPrice || row.price
}

const calculateCurrentPrice = (row) => {
  if (!row.discount) return row.price
  if (row.discount.type === 0) {
    return row.discount.originalPrice * (1 - row.discount.value / 100)
  } else {
    return row.discount.originalPrice - row.discount.value
  }
}

// 优惠信息格式化
const formatDiscount = (discount) => {
  return discount.type === 0
    ? `${discount.value}%折扣`
    : `立减¥${discount.value}`
}

// 其他方法保持不变...
</script>

<style scoped>
/* 套餐封面样式 */
.setmeal-cover {
  width: 140px;
  height: 100px;
  border-radius: 4px;
  border: 1px solid #eee;
}

/* 菜品标签布局 */
.dish-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  padding: 8px 0;
}

/* 价格显示样式 */
.price-display {
  line-height: 1.6;
  .original-price {
    color: #999;
    text-decoration: line-through;
    font-size: 12px;
  }
  .current-price {
    color: #f56c6c;
    font-size: 16px;
    font-weight: 600;
  }
  .normal-price {
    color: #333;
    font-size: 16px;
  }
}

/* 优惠信息样式 */
.discount-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  .discount-condition {
    color: #666;
    font-size: 12px;
    line-height: 1.4;
  }
}

/* 分页样式 */
.el-pagination {
  justify-content: flex-end;
  padding: 15px 0;
}

.card {
  padding: 20px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}
</style>
